<template>
    <div>
      <a-page-header
      :title="title"
      @back="router.go(-1)"
      >
      </a-page-header>
      <!-- 页面内容区 -->
      <div class="page">
        <a-form ref="formRef" layout="vertical" :model="blog">
          <a-form-item  field="title" label="标题" 
           :rules="[{ required: true, message: '请输入用标题' }]">
            <a-input v-model="blog.title" placeholder="请输入文章标题" />
          </a-form-item>
          <a-form-item  field="summary" label="摘要"  
          :rules="[{ required: true, message: '请输入摘要' }]">
            <a-textarea v-model="blog.summary" placeholder="请输入文章摘要" />
          </a-form-item>
          <a-form-item  field="content" label="内容">
              <!-- 选择一个markdown编辑器 -->
              <MdEditor 
              style="height: calc(100vh - 340px);" 
              v-model="blog.content"
              @onSave="onSave"
              />
          </a-form-item>
        </a-form>
      </div>
    </div>
</template>
  
<script setup>
import { useRouter } from 'vue-router'
import { ref,onBeforeMount } from 'vue'
import { MdEditor } from 'md-editor-v3';
import 'md-editor-v3/lib/style.css';
import { CREATE_BLOG, UPDATE_BLOG, GET_BLOG } from '@/api/blog'
import { Message } from '@arco-design/web-vue'

const router = useRouter()
const title = ref('创建文章')
// 创建文章
const blog = ref({
  id: 0,
  title: '',
  summary: '',
  content: '',
})

// 来绑定名叫formRef 元素(组件)
const formRef = ref(null)
const onSave = async () => {
 // 手动触发校验与提交
 // 1. 校验表单
    const validate = await formRef.value.validate()

    const payload = blog.value
 // 2. 保持内容
    if (!validate) {
      console.log(blog.value)
        // 判断是否有id
        if (blog.value.id) {
          // 更新
          try {
            const resp = await UPDATE_BLOG(payload.id, payload)
            blog.value = resp;
            Message.success(`更新成功`)
          } catch (error) {
            Message.error(`更新失败: ${error.message}`)
          }
        } else {
          // 创建
          try {
            const resp = await CREATE_BLOG(payload)
            blog.value = resp;
            Message.success(`保持成功`)
          } catch (error) {
            Message.error(`保持失败: ${error.message}`)
          } 
        }
 
    }
    
}

// 补充编辑逻辑
const filledUpateData = async () => {
const blogId =  router.currentRoute.value.query.id
if (blogId) {
    title.value = '更新文章'
    try {
      const resp = await GET_BLOG(blogId)
      blog.value = resp;
    } catch (error) {
      Message.error(`保持失败: ${error.message}`)
    }
  }
}

onBeforeMount(() => {
  filledUpateData()
})

</script>
  
  <style lang="css" scoped></style>